<template>
  <el-form @submit.prevent :model="formData" class="form-components" :class="{ 'block line': !_options.inline }" v-bind="_options" ref="formRef" scroll-to-error>
    <template v-for="(item, index) in fieldList" :key="`${index}${item.field || '-'}`">
      <!-- -------------------- title --------------------  -->
      <template v-if="item.type === 'title'">
        <div class="form-title" style="width: 100%">
          <FormTitle :title="item.label" />
        </div>
      </template>
      <!-- -------------------- br --------------------  -->
      <template v-else-if="item.type === 'br'">
        <div style="width: 100%"></div>
      </template>
      <!-- -------------------- solt --------------------  -->
      <FormItem v-else-if="item.slot" :label="item.label" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :style="item.style" :show="getShow(item)">
        <FormCombinedNorm
          v-if="item.select"
          :style="item.full || !_options.inline ? 'flex: 1' : ''"
          :selectStyle="item.selectStyle || 'width: 100px'"
          :options="item.select"
          :modelValue="formData[item.field]"
        >
          <!-- @update:modelValue="handleCombined(item, $event)" -->
          <template #default>
            <slot :name="item.slot" :item="item" />
          </template>
        </FormCombinedNorm>
        <slot v-else :name="item.slot" :value="formData" />
      </FormItem>

      <template v-else-if="item.type === 'describe'">
        <FormItem :label="item.label" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :style="item.style" :show="getShow(item)">
          <div style="line-height: 1.5em">
            {{ formData[item.field] || "-" }}
          </div>
        </FormItem>
      </template>
      <!-- -------------------- 单选框 --------------------  -->
      <FormItem :label="item.label" v-else-if="item.type === 'radio'" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :show="getShow(item)" @change="item?.change">
        <el-radio-group v-model="formData[item.field]" :disabled="item.disabled" :style="item.style">
          <el-radio :label="val[item.options?.valueKey || 'value']" v-for="val in item.options?.data" :key="val[item.options?.valueKey || 'value']">
            {{ val[item.options?.labelKey || "label"] }}
          </el-radio>
        </el-radio-group>
      </FormItem>
      <!-- -------------------- 多选框 --------------------  -->
      <FormItem :label="item.label" v-else-if="item.type === 'checkbox'" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :show="getShow(item)">
        <!-- 单个 -->
        <el-checkbox v-model="formData[item.field]" v-if="!item.options?.data.length" :true-label="1" :false-label="0"> </el-checkbox>
        <!-- 多个 -->
        <el-checkbox-group v-model="formData[item.field]" :disabled="item.disabled" :style="item.style" v-else>
          <el-checkbox v-for="c in item.options?.data" :key="c[item.options?.valueKey || 'value']" :label="c[item.options?.valueKey || 'value']">
            {{ c[item.options?.labelKey || "label"] }}
          </el-checkbox>
        </el-checkbox-group>
      </FormItem>
      <!-- -------------------- 开关 --------------------  -->
      <FormItem :label="item.label" v-else-if="item.type === 'switch'" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :show="getShow(item)">
        <el-switch v-model="formData[item.field]" :active-value="1" :inactive-value="0" v-bind="item.itemProps" />
      </FormItem>
      <!-- -------------------- 选择器 --------------------  xxx -->
      <FormItem :label="item.label" v-else-if="item.type === 'select'" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :show="getShow(item)" :style="item.itemStyle">
        <FormCombinedNorm
          v-if="item.select"
          :style="item.full || !_options.inline ? 'flex: 1' : ''"
          :selectStyle="item.selectStyle || 'width: 100px'"
          :options="item.select"
          :modelValue="formData[item.field]"
        >
          <template #default>
            <el-select
              :style="[item.full || !_options.inline ? { width: '100%' } : null, item.style]"
              v-model="formData[item.field].value"
              :filterable="item.filterable ?? true"
              :clearable="item.clearable ?? true"
              :popper-append-to-body="true"
              :teleported="false"
              placement="bottom"
              :multiple="item.multiple"
              :collapseTags="item.collapseTags"
              :maxCollapseTags="item.collapseTags && !item.maxCollapseTags ? 1 : item.maxCollapseTags"
              :collapseTagsTooltip="item.collapseTags && !item.collapseTagsTooltip ? true : item.collapseTagsTooltip"
              :placeholder="item.options?.placeholder || '请选择'"
              :disabled="item.disabled"
              :valueKey="item.valueKey"
              v-bind="item.itemProps"
            >
              <el-option
                v-for="s in getOption(item)"
                :key="s[item.valueKey || item.options?.valueKey || 'value']"
                :label="s[item.options?.labelKey || 'label']"
                :value="item.valueKey ? s : s[item.options?.valueKey || 'value']"
              />
            </el-select>
          </template>
        </FormCombinedNorm>
        <el-select
          v-else
          :style="[item.full || !_options.inline ? { width: '100%' } : null, item.style]"
          v-model="formData[item.field]"
          :filterable="item.filterable ?? true"
          :clearable="item.clearable ?? true"
          :popper-append-to-body="false"
          placement="bottom"
          :multiple="item.multiple"
          :collapseTags="item.collapseTags"
          :maxCollapseTags="item.collapseTags && !item.maxCollapseTags ? 1 : item.maxCollapseTags"
          :collapseTagsTooltip="item.collapseTags && !item.collapseTagsTooltip ? true : item.collapseTagsTooltip"
          :placeholder="item.options?.placeholder || '请选择'"
          :disabled="item.disabled"
          :valueKey="item.valueKey"
          v-bind="item.itemProps"
          @change="item.change && item.change($event, formData)"
          class="form-select"
        >
          <div v-if="item.isHandle" class="select-handle">
            <el-button type="primary" link @click="handleCheckAll(item, 'reversion')">反选</el-button>
            <el-button type="primary" link @click="handleCheckAll(item, 'all')">全选</el-button>
          </div>
          <el-option
            v-for="s in getOption(item)"
            :key="s[item.valueKey || item.options?.valueKey || 'value']"
            :label="s[item.options?.labelKey || 'label']"
            :value="item.valueKey ? s : s[item.options?.valueKey || 'value']"
          />
        </el-select>
        <div v-if="item.default" v-html="item.default"></div>
      </FormItem>

      <FormItem :label="item.label" v-else-if="item.type === 'selectV2'" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :show="getShow(item)">
        <FormCombinedNorm
          v-if="item.select"
          :style="item.full || !_options.inline ? 'flex: 1' : ''"
          :selectStyle="item.selectStyle || 'width: 100px'"
          :options="item.select"
          :modelValue="formData[item.field]"
        >
          <template #default>
            <el-select-v2
              :style="[item.full || !_options.inline ? { width: '100%' } : null, item.style]"
              v-model="formData[item.field].value"
              :filterable="item.filterable ?? true"
              :clearable="item.clearable ?? true"
              :multiple="item.multiple"
              :collapseTags="item.collapseTags"
              :maxCollapseTags="item.collapseTags && !item.maxCollapseTags ? 1 : item.maxCollapseTags"
              :collapseTagsTooltip="item.collapseTags && !item.collapseTagsTooltip ? true : item.collapseTagsTooltip"
              :placeholder="item.options?.placeholder || '请选择'"
              :disabled="item.disabled"
              v-bind="item.itemProps"
              :options="getOption(item)"
              popper-append-to-body
              class="form-select"
            />
          </template>
        </FormCombinedNorm>

        <el-select-v2
          v-model="formData[item.field]"
          :style="[item.full || !_options.inline ? { width: '100%' } : null, item.style]"
          :filterable="item.filterable ?? true"
          :clearable="item.clearable ?? true"
          :multiple="item.multiple"
          :collapseTags="item.collapseTags"
          :maxCollapseTags="item.collapseTags && !item.maxCollapseTags ? 1 : item.maxCollapseTags"
          :collapseTagsTooltip="item.collapseTags && !item.collapseTagsTooltip ? true : item.collapseTagsTooltip"
          :placeholder="item.options?.placeholder || '请选择'"
          :disabled="item.disabled"
          v-bind="item.itemProps"
          class="form-select"
          :options="getOption(item)"
        />

        <div v-if="item.default" v-html="item.default"></div>
      </FormItem>
      <!-- -------------------- numberRange --------------------  -->
      <FormItem v-else-if="item.type === 'numberRange'" :label="item.label" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :show="getShow(item)">
        <FormCombinedNorm
          v-if="item.select"
          :modelValue="formData[item.field]"
          :field="item.field"
          :options="item.select"
          :style="item.full || !_options.inline ? 'flex: 1' : ''"
          :selectStyle="item.selectStyle || 'width: 100px'"
        >
          <template #default>
            <NumberRange
              :style="item.style"
              v-model="formData[item.field]['value']"
              :suffix="item.suffix"
              :prepend="item.prepend"
              :precision="item.precision"
              :min="item.min"
              :max="item.max"
              :placeholder="item.placeholder"
            />
          </template>
        </FormCombinedNorm>
        <NumberRange
          v-else
          :style="item.style"
          v-model="formData[item.field]"
          :suffix="item.suffix"
          :prepend="item.prepend"
          :precision="item.precision"
          :min="item.min"
          :max="item.max"
          :placeholder="item.placeholder"
          @input="updateNumberRange(item.field, $event)"
        />
      </FormItem>
      <!-- -------------------- 时间 --------------------  -->
      <FormItem :label="item.label" v-else-if="item.type === 'dateTimeRangeNorm'" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :show="getShow(item)">
        <FormCombinedNorm
          v-if="item.select"
          :modelValue="formData[item.field]"
          :field="item.field"
          :options="item.select"
          :style="item.full || !_options.inline ? 'flex: 1' : ''"
          :selectStyle="item.selectStyle || 'width: 100px'"
        >
          <template #default>
            <el-date-picker
              class="date-picker-wrapper"
              v-model="formData[item.field]['value']"
              :style="item.style"
              :shortcuts="item.options?.shortcuts || shortcuts"
              :placeholder="item.options?.placeholder"
              v-bind="item.itemProps || datePickerProps"
              :clearable="item.clearable"
            />
          </template>
        </FormCombinedNorm>
        <el-date-picker
          v-else
          v-model="formData[item.field]"
          class="date-picker-wrapper"
          :style="item.style"
          :shortcuts="item.options?.shortcuts || shortcuts"
          :placeholder="item.options?.placeholder"
          :clearable="item.clearable"
          v-bind="item.itemProps || datePickerProps"
          @change="datePickerChange($event, item.field)"
        />
      </FormItem>

      <!-- 默认为 人员 -->
      <FormItem :label="item.label" v-else-if="item.type === 'cascader'" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :show="getShow(item)" :style="item.itemStyle">
        <FormCombinedNorm
          v-if="item.select"
          :style="item.full || !_options.inline ? 'flex: 1' : ''"
          :selectStyle="item.selectStyle || 'width: 100px'"
          :options="item.select"
          :modelValue="formData[item.field]"
        >
          <template #default>
            <el-cascader
              ref="cascaderRef"
              class="cascader-wrapper"
              v-model="formData[item.field].value"
              :options="organizationData[item.cascaderType || 'personnel'] || []"
              :props="{ ...cascaderProps, multiple: item?.multiple }"
              :show-all-levels="false"
              collapse-tags
              clearable
              filterable
              :filter-method="filterMethod"
              :placeholder="item.placeholder || '人员'"
              :style="[item.full || !_options.inline ? { width: '100%' } : null, item.style]"
            />
          </template>
        </FormCombinedNorm>
        <el-cascader
          v-else
          ref="cascaderRef"
          class="cascader-wrapper"
          v-model="formData[item.field]"
          :options="organizationData[item.cascaderType || 'personnel'] || []"
          :props="{ ...cascaderProps, multiple: item?.multiple }"
          :show-all-levels="false"
          collapse-tags
          clearable
          filterable
          :filter-method="filterMethod"
          :placeholder="item.placeholder || '人员'"
          :style="[item.full || !_options.inline ? { width: '100%' } : null, item.style]"
          @change="cascaderNodes($event, item.change)"
          v-bind="item.itemProps"
        />
      </FormItem>

      <!-- 默认为 人员 -->
      <FormItem :label="item.label" v-else-if="item.type === 'cascaderNew'" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :show="getShow(item)" :style="item.itemStyle">
        <FormCombinedNorm
          v-if="item.select"
          :style="item.full || !_options.inline ? 'flex: 1' : ''"
          :selectStyle="item.selectStyle || 'width: 100px'"
          :options="item.select"
          :modelValue="formData[item.field]"
        >
          <template #default>
            <Cascader :item="item" v-model:modelValue="formData[item.field].value" :options="organizationData" class="w-[100%]" :placeholder="item.placeholder" />
          </template>
        </FormCombinedNorm>
        <Cascader v-else :item="item" v-model:modelValue="formData[item.field]" :options="organizationData" class="w-[100%]" :placeholder="item.placeholder" />
      </FormItem>

      <!-- -------------------- 数字 --------------------  -->
      <FormItem :style="item.itemStyle" :label="item.label" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :show="getShow(item)" v-else-if="item.type === 'inputNumber'">
        <FormCombinedNorm
          v-if="item.select"
          :style="item.full || !_options.inline ? 'flex: 1' : ''"
          :selectStyle="item.selectStyle || 'width: 100px'"
          :options="item.select"
          :modelValue="formData[item.field]"
          class="input-number"
        >
          <template #default="{ modelValue }">
            <div class="input-number">
              <el-input-number
                v-model="formData[item.field].value"
                :style="item.style"
                :readonly="item.readonly"
                :type="item.type ?? 'text'"
                :placeholder="item.placeholder || `${item.label}`"
                :disabled="item.disabled"
                :controls="item.controls ?? false"
                :precision="item.precision"
                :min="item.min"
                :max="item.max"
                v-bind="item.itemProps"
              >
              </el-input-number>
              <span v-if="item.append" class="append">{{ item.append }}</span>
            </div>
          </template>
        </FormCombinedNorm>
        <div class="input-number">
          <el-input-number
            v-model="formData[item.field]"
            :style="item.style"
            :readonly="item.readonly"
            :placeholder="item.placeholder || `${item.label}`"
            :disabled="item.disabled"
            :controls="item.controls ?? false"
            :precision="item.precision"
            :min="item.min || 0"
            :max="item.max"
            v-bind="item.itemProps"
          >
          </el-input-number>
          <span v-if="item.append" class="append" :style="item.appendStyle">{{ item.append }}</span>
        </div>
      </FormItem>

      <!-- -------------------- input --------------------  -->
      <FormItem :style="item.itemStyle" :label="item.label" :rules="item.rules" :prop="[item.field]" :tooltip="item.tooltip" :show="getShow(item)" v-else>
        <FormCombinedNorm
          v-if="item.select"
          :style="item.full || !_options.inline ? 'flex: 1' : ''"
          :selectStyle="item.selectStyle || 'width: 100px'"
          :options="item.select"
          :modelValue="formData[item.field]"
        >
          <template #default="{ modelValue }">
            <el-input
              v-model="modelValue.value"
              :style="item.style"
              :readonly="item.readonly"
              :type="item.type ?? 'text'"
              :autosize="item.autosize ?? { minRows: 1, maxRows: 3 }"
              :showPassword="item.showPassword"
              :clearable="item.clearable"
              :placeholder="item.placeholder || `请输入${item.label}`"
              :disabled="item.disabled"
              v-bind="item.itemProps"
            >
              <template #prefix v-if="item.prefix">
                <slot :name="item.prefix"></slot>
              </template>
              <template #append v-if="item.append">
                <slot :name="item.append" :value="model" />
              </template>
            </el-input>
          </template>
        </FormCombinedNorm>
        <el-input
          v-else
          v-model="formData[item.field]"
          :style="item.style"
          :readonly="item.readonly"
          :type="item.type ?? 'text'"
          :autosize="item.autosize ?? { minRows: 1, maxRows: 3 }"
          :showPassword="item.showPassword"
          :clearable="item.clearable"
          :placeholder="item.placeholder || `请输入${item.label}`"
          :disabled="item.disabled"
          @blur="item.onBlur && item.onBlur(formData[item.field], formData)"
          v-bind="item.itemProps"
        >
          <template #prefix v-if="item.prefix">
            <slot :name="item.prefix"></slot>
          </template>
          <template #append v-if="item.append">
            <slot :name="item.append" :value="model" />
          </template>
        </el-input>
        <slot :name="item.field + '-slot'"></slot>
        <span v-if="item.default" v-html="item.default" class="ml-[4px]"></span>
      </FormItem>
    </template>
    <div
      v-if="_options.option"
      class="ml-[auto] pb-[16px]"
      :class="{
        'flex justify-between w-[100%]': optionFull || slots.buttonRight,
      }"
    >
      <div></div>
      <div class="flex items-center">
        <slot name="buttons" :model="model" :formRef="formRef">
          <slot name="buttonLeft"></slot>
          <el-button v-if="_options.showResetButton" @click="resetForm">
            {{ _options.resetButtonText }}
          </el-button>
          <el-button v-if="_options.showCancelButton" @click="emit('cancel')">
            {{ _options.cancelButtonText }}
          </el-button>
          <el-button :class="{ 'w-full': options?.blockSubmitButton }" type="primary" @click="onSubmit">{{ _options.submitButtonText }} </el-button>
          <slot name="buttonRight"></slot>
        </slot>
      </div>
    </div>
  </el-form>
</template>
<script setup>
import { nextTick, ref } from "vue"
import FormTitle from "@/components/XForm/FormTitle.vue"
import FormItem from "@/components/XForm/FormItem.vue"
import Cascader from "@/components/XForm/components/Cascader"

import FormCombinedNorm from "@/components/XForm/FormCombinedNorm"

import NumberRange from "@/components/NumberRange/index.vue"

import { overallOptions } from "@/api/public"

// import {shortcuts} from '@/assets/static'
import { shortcuts } from "./config.js"

const slots = useSlots()
const cascaderRef = ref()
const cascaderNodes = (e, fn = null) => {
  if (!fn) return
  fn(cascaderRef?.value?.[0].getCheckedNodes(), props.formData)
}
const model = ref({})
const formRef = ref()
const originOptions = ref({})
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
  fieldList: {
    /**
     * {
        label?: string,
        labelWidth?: string | number, // 标签宽度，例如 '50px'。 可以使用 auto。
        field: string,
        type?: ItemType,
        value?: any,
        placeholder?: string,
        disabled?: boolean,
        readonly?: boolean,
        options?: IFieldOptions,
        rules?: import('element-plus').FormItemRule[]
        clearable?: boolean // 是否可清空
        showPassword?: boolean, // 是否显示切换密码图标
        enterable?: boolean, // 当为输入框时，是否启用回车触发提交功能
      }[]
     */
    type: Array,
    default: () => [],
  },
  model: {
    type: Object,
    default: () => ({}),
  },
  options: {
    /**
      * {
        labelWidth?: string | number,
        labelPosition?: 'left' | 'right' | 'top',
        disabled?: boolean,
        size?: 'large' | 'small' | 'default',
        showResetButton?: boolean, // 是否展示重置按钮
        showCancelButton?: boolean, // 是否展示取消按钮
        submitButtonText?: string,
        resetButtonText?: string,
        cancelButtonText?: string,
        blockSubmitButton?: boolean // 提交按钮是否以块级按钮呈现
    }
   */
    type: Object,
    default: () => ({}),
  },
  optionFull: { type: Boolean, default: false },
  originOption: { type: Object, default: () => ({}) },
})

const filterMethod = (node, keyword) => {
  return node.text.toLowerCase().includes(keyword.toLowerCase())
}
const datePickerProps = {
  type: "datetimerange",
  format: "YYYY-MM-DD HH:mm:ss",
  valueFormat: "YYYY-MM-DD HH:mm:ss",
  startPlaceholder: "开始时间",
  endPlaceholder: "结束时间",
  defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)],
}

const emit = defineEmits(["submit", "cancel", "reset", "change"])

const _options = computed(() => {
  const option = {
    // labelWidth: 'auto',
    labelPosition: "right",
    disabled: false,
    scrollToError: true,
    scrollIntoViewOptions: true,
    submitButtonText: "查询",
    resetButtonText: "重置",
    cancelButtonText: "取消",
  }
  return Object.assign(option, props?.options)
})

const handleCheckAll = (item, type = "") => {
  let list = getOption(item)
  let valueList = list.map((s) => (item.valueKey ? s : s[item.options?.valueKey || "value"]))
  // 全选
  if (type == "all") {
    props.formData[item.field] = valueList
  }
  // 反选
  if (type == "reversion") {
    props.formData[item.field] = valueList.filter((v) => !props.formData[item.field].includes(v))
  }
}

// const updateSlotValue = (field) => (e) => {
//   if (typeof e[0] == "object") {
//     model.value[field] = e.map((v) => v.value).filter(Boolean)
//     console.log(model.value[field])
//   } else {
//     model.value[field] = e
//     console.log(model.value[field])
//   }
// }

// const handleCombined = (item, e) => {
//   console.log(123);
//   const { key, value } = e || {}
//   if (item.select) {
//     item.select.forEach((n) => {
//       model.value[n.value] = undefined
//     })
//     if (!key) return
//     model.value[key] = value
//     model.value[item.field] = { key, value }
//   } else {
//     model.value[item.field] = value ? JSON.parse(JSON.stringify(value)) : value
//   }
// }
const datePickerChange = (e, val) => {
  if (!e) {
    nextTick(() => {
      props.formData[val] = []
    })
  }
}
const getOption = (item) => {
  const { originOption } = props
  return originOption[item.originField] || originOptions.value?.[item.origin] || item.options?.data
}

const updateNumberRange = (field, val) => {
  props.formData[field] = val
}

const getShow = (row) => {
  const { show = () => true } = row
  return show ? show?.({ row, model: props.formData }) : true
}
// 暂未使用
const handleGetOriginOptions = async (originArr) => {
  try {
    const optionsParams = originArr.map((n) => n.origin)
    try {
      const res = await overallOptions({
        params: optionsParams,
        option: "new",
      })
      const { data } = res
      for (let item in data) {
        originOptions.value[item] = data[item]
      }
    } catch (e) {
      console.error(e)
    }
  } catch (e) {
    console.error(e)
  }
}

const handleDefault = () => {
  props.fieldList.map((item) => {
    // 如果类型为checkbox，默认值需要设置一个空数组
    const value = item.type === "checkbox" ? [] : ""
    props.model ? (model.value = JSON.parse(JSON.stringify(props.model))) : (model.value[item.field] = item.value || value)
  })
}
handleDefault()

watch(
  () => model.value,
  (val) => {
    emit("change", val)
  },
  { deep: true }
)

watch(
  () => props.model,
  (val) => {
    if (val && Object.keys(val).length) {
      handleDefault()
    }
  }
)

// 人员级连配置
const cascaderProps = ref({
  emitPath: false,
  multiple: true,
  label: "name",
  value: "user_id",
  children: "sub",
})

// 级联配置 选项数据
const organizationData = ref({})
import { getCascader } from "./components/Cascader/getCascader.js"

watch(
  () => props.fieldList,
  async () => {
    const originArr = props.fieldList.filter((n) => n.origin)
    // 外层调用 防止重复调用
    if (originArr?.length) {
      handleGetOriginOptions(originArr)
    }

    // 级联配置
    let cascaderArr = props.fieldList.filter((n) => n.type == "cascader" || n.type == "cascaderNew")
    cascaderArr = [...new Set(cascaderArr.map((v) => v.cascaderType))]
    if (cascaderArr?.length) {
      let cascaderArrNewOpt = await getCascader(cascaderArr)
      for (const key in cascaderArrNewOpt) {
        organizationData.value[key] = cascaderArrNewOpt[key]
      }
    }
  },
  { immediate: true, deep: true }
)

const onSubmit = () => {
  formRef.value.validate((valid) => {
    const _model = JSON.parse(JSON.stringify(model.value))
    if (valid) {
      emit("submit", _model)
      return false
    }
  })
}

const submit = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid) => {
      if (valid) {
        resolve(true)
      } else {
        reject(false)
        setTimeout(() => {
          let error = document.getElementsByClassName("el-form-item__error")
          error[0]?.scrollIntoView({
            block: "center",
            behavior: "smooth",
          })
          reject(false)
        }, 200)
      }
    })
  })
}
// const setFormValues = (form) => {
//   // console.log(199199);
//   // console.log(form);
//   model.value = form
// }

// const getFormValues = () => {
//   const _model = JSON.parse(JSON.stringify(model.value))
//   return _model
// }

// const handleKeyUp = (enterable) => {
//   if (!enterable) return
//   onSubmit(formRef.value)
// }
// 重置表单
const resetForm = () => {
  // model.value = JSON.parse(JSON.stringify(props.model))
  formRef.value.resetFields()
  emit("reset")
}
// const aaaaaq = () => {
//   console.log(model.value)
// }

onMounted(() => {
  // console.log(fieldList.fieldList);
  // organizationListF()
})

defineExpose({
  formRef,
  resetForm,
  submit,
})
</script>
<style lang="scss" scoped>
.form-components {
  display: flex;
  flex-wrap: wrap;
  :deep(.el-form-item) {
    margin-right: 8px;
    .el-form-item__label {
      margin-bottom: 4px;
    }
  }
  :deep(.el-form-item__content) {
    align-items: stretch;
  }
  &:line {
    // border-bottom: 1px solid #eff3fe;
    border: 1px solid var(--base-border-color);
  }

  :deep(.el-form-item--default) {
    margin-bottom: 16px;
  }
  // :deep(.el-input-group) {
  //   .el-input__wrapper {
  //     border-top-right-radius: 0;
  //     border-bottom-right-radius: 0;
  //   }
  // }
  // 数字输入框
  :deep(.input-number) {
    display: flex;
    height: 32px;
    .el-input__wrapper {
      border-top-right-radius: 0;
      border-end-end-radius: 0;
    }
    .append {
      // background: #f5f7fa;
      background-color: var(--base-small-bg-color);
      // color: #909399;
      color: var(--base-sub-text-color);
      padding: 0 12px;
      height: 32px;
      // border: 1px solid #e5e7eb;
      border: 1px solid var(--base-border-color);
      border-left: none;
      border-top-right-radius: 4px;
      border-end-end-radius: 4px;
    }
  }

  // :deep(.input-number) {
  //   .el-input-group__append {
  //     padding: 0 12px;
  //   }
  // }
  // 时间
  :deep(.date-picker-wrapper) {
    width: 310px;
    padding: 0 4px;
    .el-range-separator {
      flex: 0;
      padding: 0 2px;
    }
    .el-range-input {
      font-size: 13px;
      flex: 2;
    }
  }
}

:deep(input::placeholder) {
  color: #999;
}
:deep(.el-cascader__search-input::placeholder) {
  color: transparent;
}
:deep(.form-select) {
  height: 32px;
  .el-select__selection {
    flex-wrap: nowrap;
  }
  .el-select__tags-text {
    max-width: 60px !important;
  }
}
.select-handle {
  text-align: right;
  padding: 4px 12px;
}

:deep(.el-select__input.is-default) {
  width: 100% !important;
  margin-left: 2px;
}
// .input-number1 {
//   display: flex;
//   :deep(.el-input__wrapper) {
//     border-top-right-radius: 0;
//     border-end-end-radius: 0;
//   }
//   .append {
//     background: #f5f7fa;
//     padding: 0 12px;
//     height: 32px;
//     border: 1px solid #e5e7eb;
//     border-left: none;
//     border-top-right-radius: 4px;
//     border-end-end-radius: 4px;
//   }
// }
</style>
